<template>
  <div>
    <el-dialog
      title="新增组织机构"
      :visible.sync="visible"
      :modal-append-to-body="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="closeDialog"
      
      width="500px"
    >
     <div class="warn">
        <p><strong>说明:</strong><br>标记*的必须录入数据的字段<br>上级组织机构为空的时候，该组织机构是公司。</p>
      </div>

      <el-form :model="submit" size="mini">
        <el-form-item label="*名称">
          <el-input v-model="submit.name"></el-input>
        </el-form-item>
        <el-form-item label="上级组织">
          <el-input v-model="submit.fathername"></el-input>
          <el-popover placement="right" width="400" v-model="treeApp.visible">
            <div style="width:400px">
              <treeTable
                :tableData="treeApp.here_list.treelist"
                table_height="500"
                :firstColumn="treeApp.firstColumn"
                @rowclick="selectFather"
                v-if="treeApp.hackReset"
              >
                <el-table-column prop="code" label="编码" width="150"></el-table-column>
              </treeTable>
              <div style="width:100px;background:red;margin:3px auto;">
                <el-button type="primary" @click="SureSelectOrange">确定选择机构</el-button>
              </div>
            </div>
            <el-button slot="reference">选择</el-button>
          </el-popover>
          <el-button @click="submit.fathername=''">清空上级组织机构</el-button>
        </el-form-item>
        <el-form-item label="*编码">
          <el-input v-model="submit.code"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="Submit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import treeTable from "../../../multiplexing/treetable";

export default {
  components: {
    treeTable
  },
  props: {
    list: {
      style: Object
    },
    form: {
      style: Object
    }
  },
  data() {
    return {
      submit: {
        father: "0",
        fathername: "",
        usernum: 0,
        level: 1
      },
      visible: true,
      treeApp: {
        hackReset: false,
        visible: false,
        here_list: {},
        firstColumn: {
          name: "机构组织名",
          prop: "name",
          width: "300"
        }
      }
    };
  },
  methods: {
    Check() {
      if (
        this.submit.name == null ||
        this.submit.name == "" ||
        this.submit.code == null ||
        this.submit.code == ""
      ) {
        this.$message.error("请录入必填数据的字段！");
        return false;
      }
      return true;
    },
    Submit() {
      if (this.Check()) {
        if (this.submit.fathername == "") {
          this.submit.father = "0";
          this.submit.level = 1
        }
        this.submit;
        this.$http.post("/orangetree/insert", this.submit).then(response => {
          if (response.data == "success") {
            this.$message({
              message: "添加完成",
              type: "success"
            });
            this.NeedRefresh();
            this.visible = false;
          } 
        });
      }
    },
    closeDialog() {
      this.$emit("dialog-close");
    },
    selectFather(node) {
      this.submit.father = node.id;
      this.submit.fathername = node.name;
      this.submit.level = node.level + 1;
    },
    SureSelectOrange() {
      this.treeApp.visible = false;
    },
    NeedRefresh() {
      this.$emit("refresh");
    }
  },
  created() {
    this.$http.get("orangetree/list").then(response => {
      this.treeApp.here_list.treelist = response.data;
      this.$nextTick(() => {
        this.treeApp.hackReset = true;
      });
    });
  }
};
</script>

<style>
.warn {
  padding: 4px;
  background-color: rgb(206, 221, 231);
  color: rgb(78, 76, 76);
  border-radius: 5px;
}
</style>